<!-- AppSkills.vue - 技能展示组件 -->
<template>
  <!-- 技能展示区块 -->
  <section class="skills section" id="skills">
    <!-- 区块标题，包含图标和国际化文本 -->
    <h2 class="section__title skills__title">
      <i class="alicon alicon-daima skills__icon"></i>
      {{ $t("skills__title") }}
    </h2>
    <!-- 区块副标题，使用i18n国际化 -->
    <span class="section__subtitle">{{ $t("skills__subtitle") }}</span>

    <!-- 技能内容容器 -->
    <div class="skills__container container grid">
      <div class="skills__content">
        <!-- 技能列表，使用v-for循环渲染 -->
        <div class="skills__list grid">
          <div v-for="skill in skills" :key="skill.title">
            <!-- 技能标题 -->
            <div class="skills__titles">
              <h3 class="skills__name">{{ skill.title }}</h3>
            </div>
            <!-- 技能进度条 -->
            <div class="skills__bar">
              <div class="skills__percentage" :style="`width: ${skill.percentage}`"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
// 导入Vue响应式API
import {ref} from 'vue'

export default {
  name: "AppSkills",
  setup() {
    // 技能数据列表，包含技能名称和掌握程度
    const skills = ref([
      {
        title: 'web全栈开发',
        percentage: '70%'
      },
      {
        title: '数据库管理',
        percentage: '50%'
      },
      {
        title: 'PHP',
        percentage: '70%'
      },
      {
        title: 'python',
        percentage: '50%'
      },
       {
        title: '网络管理',
        percentage: '90%'
      },
    ])
    return {skills}
  }
}
</script>

<style lang="scss" scoped>
/* 技能展示样式 */
.skills {
  /* 容器样式 */
  &__container {
    row-gap: 0;
  }

  /* 头部样式 */
  &__header {
    display: flex;
    align-items: center;
    margin-bottom: var(--mb-2-5);
    cursor: pointer;
  }

  /* 图标样式 */
  &__icon {
    font-size: 2rem;
    color: var(--first-color);
    margin-right: var(--mb-0-75);
  }

  /* 标题样式 */
  &__title {
    margin-bottom: var(--mb-0-75);
  }

  /* 技能标题容器样式 */
  &__titles {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--mb-0-5);
  }

  /* 副标题样式 */
  &__subtitle {
    font-size: var(--small-font-size);
    color: var(--text-color-light);
  }

  /* 技能列表样式 */
  &__list {
    row-gap: 1.5rem;
    padding: 0 2.7rem;
    transition: 0.4s;
  }

  /* 进度条背景样式 */
  &__bar {
    height: 5px;
    border-radius: 0.25rem;
    background-color: var(--first-color-lighter);
  }

  /* 进度条填充样式 */
  &__percentage {
    height: 100%;
    border-radius: 0.25rem;
    display: block;
    background-color: var(--first-color);
  }
}

/* 全局标题样式美化 */
.section__title {
  font-size: var(--h1-font-size);
  color: var(--title-color);
  text-align: center;
  margin-bottom: var(--mb-1);
  font-weight: var(--font-semi-bold);
  position: relative;
  padding-bottom: 0.5rem;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--first-color);
    border-radius: 2px;
  }
}

.section__subtitle {
  display: block;
  font-size: var(--small-font-size);
  margin-bottom: var(--mb-3);
  text-align: center;
  color: var(--text-color-light);
}
</style>